// 数据资源注册--默认设置
$(function (){

    // 默认控制设置
    // 选中的规则--通过级联选择器选中的
    let selectRulesIdList=[]
    //删除级联选择器选中的
    let delRulesIdList=[]
    // 默认控制设置表格数据
    let tableData=[]
    // 请求下来的原始用户列表
    let userListDefault=[]
    // 请求下来的用户类型列表
    let userTypeDefault=[
        {
            value:1,
            label:'个人'
        },
        {
            value: 2,
            label: '私人企业'
        },
        {
            value: 3,
            label: '国家重点企业'
        },
        {
            value: 4,
            label: '组织机构'
        },
        {
            value: 5,
            label: '事业单位'
        },
        {
            value: 6,
            label: '普通局委办'
        },
        {
            value: 7,
            label: '权利机构'
        }
    ];
    // 请求下来的用户级别列表
    let userLevelDefault=[
        {
            value: 1,
            label: '低级用户'
        },
        {
            value: 2,
            label: '中级用户'
        },
        {
            value: 3,
            label: '高级用户'
        },
        {
            value: 4,
            label: '超级用户'
        }
    ];
    let visible=[{value:1,label:'可见'},{value: 2,label: '不可见'}]
    // 选中的用户列表
    let userSelectedList=[]
    // 选中的用户类型列表
    let userTypeSelectedList=[]
    // 选中的用户级别列表
    let userLevelSelectedList=[]
    // 级联选择器默认设置
    let layCascaderDefault={
        clearable: true, // 显示清除按钮
        props: {
            multiple: true, // 允许多选
            strictMode:true//开启严格模式
        }
    }
    // 默认控制行序号
    let CSet_Num=0;

    // 控制设置添加行
    $("#controlSet").on("click",'.addTrItem',function (){
        ControlSetDOM()
    })
    // 控制设置删除行
    $("#controlSet").on("click",'.deleteTrItem',function (){
        let index = $(this).parents("tr").attr("dataIndex");
        if (confirm("是否删除第["+index+']行')){
            CSet_Num--;
            // 获得tr的索引
            const rowIndex = $(this).parents("tr").index();
            // console.log(selectRulesIdList,tableData)
            delRulesIdList.push(tableData[index].id)
            // console.log('rowindex',rowIndex)
            tableData.splice(rowIndex,1)
            $(this).parents("tr").remove();
            // console.log('tableData',tableData)
        }
    })

    // 功能函数部分
    // 使用 layui.layCascader 创建级联选择器

    // 渲染规则集规则 返回layCascader
    function rulesCollectionRender() {
        // 规则规则集数据
        let data = [
            {
                value: 1110,
                label: '普通人群规则集',
                children: [
                    {
                        value: 1112,
                        label: '规则',
                        users: [{username: '若依', id: 1}],
                        userTypes: [{typeName: '个人', id: 1}],
                        userLevels: [{levelName: '低级用户', id: 1}],
                        visible: 2
                    },
                    {
                        value: 1113,
                        label: '产品1规则',
                        users: [{username: '若依', id: 1}, {username: 'xiahuasong', id: 107}],
                        userTypes: [{typeName: '个人', id: 1}],
                        userLevels: [{levelName: '中级用户', id: 2}],
                        visible: 1
                    },
                ]
            },
            {
                value: 2110,
                label: '特殊机构规则集',
                children: [
                    {
                        value: 2112,
                        label: '产品2222规则'
                    },
                    {
                        value: 2111,
                        label: '2222规则'
                    }
                ]
            }
        ]
        // 使用 layui.layCascader 创建级联选择器
        // 通过 cas.changeEvent 注册选中值改变的事件
        let nodeSelected=[]
        let missingIndexList=[];
        let cas = layui.layCascader({
            elem: '#rulesCollectionSel', // 绑定级联选择器的 DOM 元素ID
            clearable: true, // 是否显示清除按钮
            options: data, // 级联选择器的选项数据，data 必须满足一定的格式（后面会解释）
            props: {
                multiple: true, // 是否允许多选
                // checkStrictly: true // 是否严格的选中父节点，设置为 true 表示父节点不会被选中
                // strictMode: true
            },
            value: selectRulesIdList// 初始值，即级联选择器当前选中的值
        });
        cas.changeEvent(function (value, node) {
            selectRulesIdList = value
            // 删除了某项
            console.log('value', selectRulesIdList)
            if (nodeSelected.length > node.length) {
                let delItem = nodeSelected.filter(item => !node.includes(item))
                delItem.forEach(function (item) {
                    // console.log(item.data)
                    let index = tableData.findIndex(ele => ele.id === item.data.value)
                    if (index !== -1) {
                        missingIndexList.push(index)
                    }
                    // console.log(index)
                })
                missingIndexList.forEach(ele => {
                    delTrItem(ele)
                })
                // console.log("Missing element index:", missingIndexList); // 输出: 1
                // delItem.forEach(function (item,index){
                //     delTrItem(index)
                // })
                // console.log('del',delNode); // 输出匹配的索引数组
                nodeSelected = node; // 将选中的值保存到 selectTypeIdList 变量中
            }
            // 增加某项
            else if (nodeSelected.length < node.length) {
                let addNodes = node.filter(item => !nodeSelected.includes(item))
                // console.log('增加的item', addNodes)
                addNodes.forEach(function (item, index) {
                    ruleNodeRender(item)
                })
                nodeSelected = node;
            }
        });
        console.log('selId',selectRulesIdList,'delId',delRulesIdList)
        // cas.setValue([1113])
        delRulesIdList.forEach(ele=>{
            if (selectRulesIdList.includes(ele)){
                console.log('setValue')
            cas.setValue(selectRulesIdList)
            }
        })
        return cas;
    }
    rulesCollectionRender()
    //默认控制新增一行渲染(data:一行的信息,返回行号）
    function ControlSetDOM(data) {
        CSet_Num++;
        // 删除icon
        let deleteHtml =
            `<span class="deleteTrItem">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
							<path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z" />
                    </svg>
            </span>`
        let html =
            `<tr dataIndex=`+CSet_Num+`>
				<td>`+CSet_Num+`</td>
				<td class="select user selectUsers">
				    <div>
					    <input id="userSel" readonly>
					</div>
				</td>
				<td class="select type">
				     <div>
					    <input id="userTypeSel" readonly>
					</div>
				</td>
				<td class="select level">
				     <div>
					    <input id="userLevelSel" readonly>
					</div>
                </td>
<!--				<td class="info"><input class="ControlSet_Remark" type="text"  placeholder="说明"></td>-->
				<td class="select isVisible ">
					 <div>
					    <input id="visible" readonly>
					</div>
                </td>
				<td class="controlDel cDel" style="border:none;">`+deleteHtml+`</td>
			</tr>`
        $("#controlSet tbody").append(html);
        layui.form.render();
        userListReq(CSet_Num,data?data.users:[])
        userTypeSelRender(userTypeDefault,CSet_Num,data?data.userTypes:[])
        userLevelSelRender(userLevelDefault,CSet_Num,data?data.userLevels:[])
        visibleSelRender(visible,CSet_Num,data?data.visible:2)
        tableData.push(data?data:[])
        console.log('tableData',tableData)
        return CSet_Num;
    }

    // 用户下拉框渲染（data：用户列表,dataIndex:行号，selectedData：默认选中的值）
    function userSelRender(data,dataIndex,selectedData){
        // console.log('选中的用户',selectedData)
        let userSelCasObj=
            {
            elem:`tr[dataIndex="${dataIndex}"] #userSel`,
            clearable: true, // 显示清除按钮
            options:data,
            props: {
            multiple: true, // 允许多选
                // strictMode:true//开启严格模式
        },
            value:selectedData
    }
        let userSelCas=layui.layCascader(userSelCasObj)
    }

    // 用户类型下拉框渲染（data：用户类型列表）
    function userTypeSelRender(data,dataIndex,selectedData){
        // 记录用户选中的值
        let userTypeSelDefault=[[1,2]]
        let userTypeSelCasObj=
            {
                elem:`tr[dataIndex="${dataIndex}"] #userTypeSel`,
                clearable: true, // 显示清除按钮
                options:data,
                props: {
                    multiple: true, // 允许多选
                    // strictMode:true//开启严格模式
                },
                value:selectedData
            }
        let userSelCas=layui.layCascader(userTypeSelCasObj)
        // 通过 cas.changeEvent 注册选中值改变的事件
        userSelCas.changeEvent(function(value, node) {

            // console.log('选择的value',selectRulesIdList,node)
            // value=1
        });
    }

    // 用户类型下拉框渲染（data：用户类型列表）
    function userLevelSelRender(data,dataIndex,selectedData){
        // 记录用户选中的值
        let userLevelSelDefault=[]
        let userLevelSelCasObj=
            {
                elem:`tr[dataIndex="${dataIndex}"] #userLevelSel`,
                clearable: true, // 显示清除按钮
                options:data,
                props: {
                    multiple: true, // 允许多选
                    // strictMode:true//开启严格模式
                },
                value:selectedData
            }
        let userSelCas=layui.layCascader(userLevelSelCasObj)
    }

    // 用户列表请求(返回原始用户列表）
    function  userListReq(dataIndex,selectedData){
        $.ajax({
       timeout:30000,
            url: window.Http + "/system/user/list/select",
            type: 'GET',
            headers: {
                'Authorization': "Bearer " + sessionStorage.getItem('Token')
            },
            data:{userName:""},
            success: function (res) {
                if (res.code === 200) {
                    // console.log(res.rows)
                    userListDefault=res.rows;
                    userSelRender(dataFormat(userListDefault,'userId','nickName'),dataIndex,selectedData)
                    // console.log(userLevelDefault)
                    return userListDefault;
                }else{
                    console.log('error')
                }
            }
        })
        return userListDefault;
    }

    function  visibleSelRender(data,dataIndex,selectedData){
        // console.log('可见',selectedData,typeof selectedData)
        let visibleSelCasObj=
            {
                elem:`tr[dataIndex="${dataIndex}"] #visible`,
                clearable: true, // 显示清除按钮
                options:data,
                props: {
                    multiple: false, // 允许多选
                    // strictMode:true//开启严格模式
                },
                value:selectedData
            }
        let visible=layui.layCascader(visibleSelCasObj)

    }

    // 规则选中表格渲染
    function ruleNodeRender(node){
        userSelectedList=extractIds(node.data.users,'id')
        userTypeSelectedList=extractIds(node.data.userTypes,'id')
        userLevelSelectedList=extractIds(node.data.userLevels,'id')
        const visible=node.data.visible
        const id=node.data.value
        // console.log(visible,typeof visible)
        // 新增一行
        const data={
            users:userSelectedList,
            userTypes: userTypeSelectedList,
            userLevels: userLevelSelectedList,
            visible:visible,
            id:id
        }
        return   ControlSetDOM(data)
    }
    function delTrItem(index){
        if (confirm(`是否删除第${index+1}行`)){
           $(`#controlSet  tbody tr:eq(${index})`).remove();
            CSet_Num--;
        }
    }

    // 数据转换成级联列表需要的样式
    // data:原始数组，value:绑定的值（id），label：标签显示值，返回正确格式数组
    function dataFormat(data,value,label){
        let arr=[]
        data.forEach(function (item,index){
            arr[index]={value:'',label:''}
            arr[index].value=data[index][value];
            arr[index].label=data[index][label]
        })
        return arr;
    }
    // 获取id数组函数(idName:id的属性名）
    function extractIds(usersArray,idName) {
        return usersArray.map(user => user[idName]);
    }

})
